<template>
  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doPageRecognition"
      >剪切板文字识别，页面代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activePageKey">
    <a-collapse-panel key="1" header="页面代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(pageCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="pageCode" class="mb-10px" />
    </a-collapse-panel>
  </a-collapse>

  <a-divider />

  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doFormRecognition"
      >剪切板文字识别，Form表单代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activeFormKey">
    <a-collapse-panel key="1" header="Form表单代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(formCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="formCode" class="mb-10px" />
    </a-collapse-panel>
    <a-collapse-panel key="2" header="Form表单校验代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(formRulesCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="formRulesCode" class="mb-10px" />
    </a-collapse-panel>
  </a-collapse>

  <a-divider />

  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doTableRecognition"
      >剪切板文字识别，Table表格代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activeTableKey">
    <a-collapse-panel key="1" header="Table表格代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(tableCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="tableCode" class="mb-10px" />
    </a-collapse-panel>
    <a-collapse-panel key="2" header="Table脚本代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(scriptCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="scriptCode" class="mb-10px" />
    </a-collapse-panel>
  </a-collapse>

  <a-divider />

  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doTableDetailRecognition"
      >剪切板文字识别，Table详情代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activeTableDetailKey">
    <a-collapse-panel key="1" header="Table详情代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(tableDetailCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="tableDetailCode" class="mb-10px" />
    </a-collapse-panel>
  </a-collapse>

  <a-divider />

  <div class="flex gap-10px">
    <a-button type="primary" class="mb-15px" @click="doDictRecognition"
      >剪切板文字识别，字典配置代码生成</a-button
    >
  </div>

  <a-collapse v-model:activeKey="activeDictKey">
    <a-collapse-panel key="1" header="字典代码">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(dictCode)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="dictCode" class="mb-10px" />
    </a-collapse-panel>
    <a-collapse-panel key="2" header="总长度">
      <template #extra>
        <div class="fyc gap-5px" @click.stop="doCopy(dictTotalLength)">
          <SnippetsOutlined class="c-primary" />
          <span class="c-primary text-12px">复制</span>
        </div>
      </template>
      <XnHighlightjs :code="dictTotalLength" class="mb-10px" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
const { copy } = useClipboard()
import { message } from 'ant-design-vue'

const pageCode = ref('')
const activePageKey = ref<string[]>([])
const doPageRecognition = () => {
  activePageKey.value = []
  pageCode.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.websiteToPage(clipText, (val) => {
      console.log(val)
      pageCode.value = val
    })
  })
}

const formCode = ref('')
const formRulesCode = ref('')
const activeFormKey = ref<string[]>([])
const doFormRecognition = () => {
  activeFormKey.value = []
  formCode.value = ''
  formRulesCode.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.domToForm(clipText, (val) => {
      formCode.value = val.form
      formRulesCode.value = val.rules
    })
  })
}

const tableCode = ref('')
const scriptCode = ref('')
const activeTableKey = ref<string[]>([])
const doTableRecognition = () => {
  activeTableKey.value = []
  tableCode.value = ''
  scriptCode.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.domToTable(clipText, (val) => {
      console.log(val)
      tableCode.value = val.table
      scriptCode.value = val.script
    })
  })
}

const tableDetailCode = ref('')
const activeTableDetailKey = ref<string[]>([])
const doTableDetailRecognition = () => {
  activeTableDetailKey.value = []
  tableDetailCode.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.domToTableDetail(clipText, (val) => {
      tableDetailCode.value = val
    })
  })
}

const dictCode = ref('')
const dictTotalLength = ref('')
const activeDictKey = ref<string[]>([])
const doDictRecognition = () => {
  activeDictKey.value = []
  dictCode.value = ''
  dictTotalLength.value = ''
  navigator.clipboard.readText().then((clipText) => {
    window.api.domToDict(clipText, (val) => {
      dictCode.value = val.dictRes
      dictTotalLength.value = val.totalLength
    })
  })
}

const doCopy = async (val) => {
  await copy(val)
  message.success('复制成功')
}

onMounted(() => {})
</script>

<style lang="less" scoped>
:deep(.hljs span) {
  line-height: 20px;
}
</style>
